<template>
    <div class="page">
      <!-- <web-view :src="htmlUrl" style="width: 100vw;"></web-view> -->
      <div class="heads">
        在吗？送你1000元购车抵用券
      </div>
      <div class="bgimg">
        <image src="https://files.yzsheng.com/shareH5/h5img/hbao@2x.png" mode="widthFix" />
      </div>
      <div class="ditbox">
        <!-- 优惠券外背景有透明度 -->
        <div class="ditcss">
          <div class="dictbox">
            <image src="https://files.yzsheng.com/shareH5/h5img/youhuiquan1@2x.png" mode="widthFix"/>
            <image src="https://files.yzsheng.com/shareH5/h5img/youhuiquan2@2x.png" mode="widthFix"/>
          </div>
          <div class="mobilecss">
            <input class="mobilinput" type="tel" name="mobile" placeholder="请输入手机号" maxlength="11" v-model="mobiles" />
          </div>
          <div class="vfCodeinput" v-if="showvfcode">
            <input class="mobilinput" type="tel" name="mobile" placeholder="请输入验证码" maxlength="6" v-model="verficationCode" />
          </div>
          <div class="vfcodenum" v-if="showvfcode">
            <div class="vfcxhq" v-if="showText" @click="sendCode">重新获取</div>
            <div v-else class="vfnum">{{second}}s重新发送</div>
          </div>
          <div class="vfCode" v-if="!showvfcode" @click="sendCode">
            获取验证码
          </div>
          <div class="vfCode" v-if="verficationCode !==''" @click="mobilebtn">
            免费领取
          </div>
          <div class=" vfCodehuis" v-else>
            免费领取
          </div>
          <div class="download" @click="goIndex">回到首页</div>
          
        </div>
        <div class="QRcode">
          点击保存图片，使用微信扫码识别
          <div class="qrcImg" @click="showewm">
            <image src="https://files.yzsheng.com/shareH5/h5img/gongzh.jpg" />
          </div>
          关注微信公众号<br>
          了解更多购车、养车福利
        </div>
        <!-- 温馨提示 -->
        <div class="zhehzaos" v-show="reminder">
          <div class="remindercss">
            <div class="headcss">
              温馨提示
            </div>
            <div class="bodycss">
              您已经是7迈车的会员了，<br>
              不可重复领取
            </div>
            <div class="btns">
              <div class="btns" @click="goodreview()">打开看看</div>
            </div>
          </div>
        </div>
        <!-- 领取成功 -->
        <div class="zhehzaos" v-show="successfulClaim">
          <div class="reminderScuss">
            <image src="https://files.yzsheng.com/shareH5/h5img/hongbao@2x.png" mode="widthFix"/>
            <div class="usenow">
              <div class="usenoww" @click="goodreview()">立即使用</div>
            </div>
            <div class="guanbi" @click="closeBtn()">
              X
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '234',
        showvfcode: false, //是否显示验证码
        showText: true, //重新发送验证码
        mobiles: '', //手机号
        second: 60, //验证码60S
        verficationCode: '', //验证码
        inviteCode: '', //邀请码
        // 温馨提示
        reminder: false,
        // 领取成功
        successfulClaim: false,
      }
    },
    onLoad(options) {
      this.inviteCode = options.code
      console.log(options.code)
    },
    methods: {
      //发送验证码
      async sendCode(type) {
        if (this.mobiles === '') {
          uni.showToast({
            title:'请输入手机号',
            icon:"none"
          })
          return
        }
        let data = {
          mobile: this.mobiles
        }
        uni.showLoading({
          title: '短信发送中',
        })
        try {
          const res =await this.$api.user.InvitedFriend(data)
          uni.hideLoading()
          if (res.code === 200) {
            this.showvfcode = true
            uni.showToast({
              title:res.data.statusMsg,
              icon:"none"
            })
            this.getCode()
          }
        } catch (err) {
          uni.hideLoading()
        }
      },
      //被邀请的好友注册
      async mobilebtn() {
        this.isLoadding = true
        if (this.verficationCode === '') {
          uni.showToast({
            title:'请输入验证码',
            icon:"none"
          })
          return
        }
        let data = {
          mobile: this.mobiles,
          verficationCode: this.verficationCode, //验证码
          inviteCode: this.inviteCode, //邀请码
          shareType: 1 //普通好友1，自助洗车邀请2
        }
        try {
         const res =await this.$api.user.RegisterInvitedFriend(data)
          if (res.code === 200) {
            uni.hideLoading()
            this.showvfcode = false
            this.verficationCode = ''
            if (res.data.returnMessage === '该手机已经被注册，不能领取抵用券') {
              this.reminder = true //显示温馨提示
            }
            if (res.data.returnMessage === '领取成功') {
              this.successfulClaim = true //显示领取成功
            }
          }
        } catch (err) {
          uni.hideLoading()
        }
      },
      //倒计时
      getCode() {
        this.showText = false
        let times = 60
        this.interval = setInterval(() => {
          if (times > 1) {
            times--
            this.second = times < 10 ? '0' + times : times //小于10秒补 0
          } else {
            clearInterval(this.interval)
            this.second = 60
            this.showText = true
            this.interval = null
          }
        }, 1000)
      },
      // 回到首页
      goIndex() {
        uni.switchTab({
          url:"/pages/index/index"
        })
      },
      //关闭领取成功
      closeBtn() {
        this.successfulClaim = false
      },
      //跳转到个人中心
      goodreview() {
        uni.switchTab({
          url:"/pages/me/me"
        })
      },
      //查看二维码
      showewm(){
        uni.previewImage({
            urls: ["https://files.yzsheng.com/shareH5/h5img/gongzh.jpg"]
        });
      },
    }
  }
  
</script>

<style scoped>
  view,input{
    box-sizing: border-box;
  }
  .page{
    background-color: #434667;
    display: inline-block;
    width: 100%;
  } 
  .heads {
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
    line-height: 44px;
  }
      
  .bgimg {
    width: 750rpx;
    height: 760rpx;
  }
      
  .bgimg image {
    width: 100%;
  }
      
  .ditbox {
    padding: 0px 18px;
    margin-top: -15px;
  }
      
  .ditcss {
    /* width: 340px; */
    /* height: 415px; */
    background: linear-gradient(0deg, #ffffff, #ffffff);
    opacity: 0.98;
    border-radius: 10px;
    padding: 20px 18px;
  }
      
  .dictbox {
    background: none;
    width: 100%;
  }
      
  .dictbox image {
    background: none;
    width: 100%;
    height: 30%;
  }
      
  .mobilecss {
    width: 100%;
    height: 42px;
    line-height: 42px;
    background: linear-gradient(0deg, #ffffff, #ffffff);
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    margin-top: 32px;
  }
      
  .mobilinput {
    width: 100%;
    height: 40px;
    line-height: 42px;
    background: linear-gradient(0deg, #ffffff, #ffffff);
    border: none;
    text-align: center;
    border-radius: 5px;
  }
      
  .vfCode {
    width: 100%;
    height: 42px;
    margin-top: 12px;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 5px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #3D3D3D;
    text-align: center;
    line-height: 42px;
  }
      
  .vfCodehuis {
    width: 100%;
    height: 42px;
    margin-top: 12px;
    background: linear-gradient(0deg, #CFCFCF, #CFCFCF);
    border-radius: 5px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    text-align: center;
    line-height: 42px;
  }
      
  .vfCodeinput {
    width: 100%;
    height: 42px;
    background: linear-gradient(0deg, #ffffff, #ffffff);
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    margin-top: 12px;
  }
      
  .vfcodenum {
    background: none;
    margin-top: 10px;
  }
      
  .vfnum {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    background: none;
    text-align: right;
  }
      
  .vfcxhq {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FBB000;
    background: none;
    text-align: right;
  }
      
  .download {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    text-decoration: underline;
    color: #EB5C02;
    background: none;
    text-align: center;
    margin-top: 20px;
  }
      
  .QRcode {
    width: 100%;
    height: 267px;
    background: #FFFFFF;
    opacity: 0.92;
    border-radius: 10px;
    margin-top: 12px;
    text-align: center;
    padding-top: 30px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 50px;
  }
      
  .qrcImg {
    background: none;
    padding: 12px 0px;
  }
      
  .qrcImg image {
    width: 131px;
    height: 132px;
    background: none;
  }
      
  .toast {
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 45%;
    transition: all .5s;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    border-radius: 5px;
    color: #FFF;
    background: rgba(17, 17, 17, 0.7);
    /* height: 45px; */
    line-height: 30px;
    padding: 0 15px;
    max-width: 150px;
    word-wrap: break-word;
    word-break: normal;
  }
  .zhehzaos{
     background: #000000ad;
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 1999;
     top: 0;
     left: 0;
  }
  .remindercss{
      position: fixed;
      z-index: 2000;
      left: 50%;
      top: 45%;
      transition: all .5s;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      border-radius: 5px;
      color: #000000;
      background: #FFFFFF;
      /* height: 45px; */
      line-height: 30px;
      padding: 26px 20px;
      width: 250px;
      word-wrap: break-word;
      word-break: normal;
  }
  .reminderScuss{
      position: fixed;
      z-index: 2000;
      left: 50%;
      top: 45%;
      transition: all .5s;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      border-radius: 10rpx;
      color: #000000;
      background: none;
      line-height: 60rpx;
      padding: 52rpx 40rpx;
      width: 566rpx;
      word-wrap: break-word;
      word-break: normal;
  }
  .reminderScuss image{
    width: 100%;
    background: none;
  }
  .headcss{
    background: none;
    font-size: 54rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .bodycss{
      background: none;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
  }
  .usenow{
    width: 364rpx;
    height: 88rpx;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 44rpx;
    line-height: 88rpx;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-top: -166rpx;
    position: absolute;
    left: 100rpx;
  }
  .usenoww{
    background: none;
  }
  .guanbi{
    width: 66rpx;
    height: 66rpx;
    background: none;
    border: 2rpx solid #FFFFFF;
    border-radius: 50%;
    color: #FFFFFF;
    left: 256rpx;
    position: absolute;
  }
  .btns{
    height: 88rpx;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 44rpx;
    line-height: 88rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-top: 40rpx;
  }
  a{
  text-decoration: none;
  }
  .flexss{
    display: flex;
    background: none;
    margin-top: 20px;
  }
  .quxiao{
    width: 260rpx;
    height: 88rpx;
    background: #333333;
    border-radius: 44rpx 0px 0px 44rpx;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFE23E;
    line-height: 88rpx;
  }
  .yunxu{
    width: 130px;
    height: 44px;
    background: linear-gradient(0deg, #FBD220, #FFE23E);
    border-radius: 0px 22px 22px 0px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44px;
  }
  .lodding{
    position: fixed;
    top: calc(50% - 20px);
    z-index: 999;
    left: calc(50% - 20px);
  }
</style>
